<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-12 11:25:39
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-25 21:05:14
 * @FilePath: \hbzc-groupmeal-center-web\src\views\dashboard\index.vue
-->
<template>
  <el-scrollbar height="800px">
    <div class="app-container homebox">
      <pb-card height="100%" style="background: #F3F3F3;">
        <div class="dashboard-container">
          <div class="row Topbox">
            <div class="left-block">
              <div class="flex items-center">
                <span class="spantext1">今日数据</span><span class="spantext2">2025-02-22</span><span class="spantext3">预估
                </span><el-popover placement="top" trigger="hover" content="这是内容">
                  <template #reference>
                    <pb-icon name="question" size="20"></pb-icon>
                  </template>
                </el-popover>
              </div>
              <div class="flex">
                <TodaydataBox v-for="(ele, index) in Todaydatalist" :Todaydata="ele" :index="index" :key="index" />
              </div>
            </div>
            <div class="right-block">Right Content 1</div>
          </div>
          <div class="row Centerbox">
            <div class="left-block ">
              <div class="flex items-center m-b5.2">
                <span class="spantext1">经营分析</span><span class="spantext3">预估值
                </span><el-popover placement="top" trigger="hover" content="这是内容">
                  <template #reference>
                    <pb-icon name="question" size="20"></pb-icon>
                  </template>
                </el-popover>
                <div class="flex items-center" style="margin-left: auto;cursor: pointer;" @click="onBigeachartFn">
                  <span class="m-r1 spantext2">展开查看</span> <pb-icon name="scan" size="16"></pb-icon>
                </div>
              </div>
              <div class="flex items-center m-b4" style="flex-wrap: wrap;">
                <pb-select v-model="EchartFrom.tenantId" width="200" placeholder="请选择餐厅" keys="tenantId"
                  label="tenantName" :options="KitchenList" @change="selectkitchenFn($event)" />
                <pb-date-picker class="m-l4" v-model="planDateRang" placeholder="请输入日期"
                  @change="dateChange"></pb-date-picker>
                <pb-check class="m-l4" :list="staList" @change="changeCheck($event)" :isSingle="true"></pb-check>
                <div class="btndiv" style="margin-left: auto;" v-show="EchartFrom.tenantId != 'all'">
                  <div :class="{ boderdiv: SaleroiStatus == 'statis' }" @click="setSaleroiStatusFn('statis')"
                    :style="{ 'border-right': SaleroiStatus == 'roi' ? 'none' : '' }">经营数据</div>
                  <div :class="{ boderdiv: SaleroiStatus == 'roi' }" @click="setSaleroiStatusFn('roi')"
                    :style="{ 'border-left': SaleroiStatus == 'statis' ? 'none' : '' }">投产比</div>
                </div>
              </div>
              <div>
                <Allechart v-if="EchartFrom.tenantId == 'all'" ref="refAllechart" />
                <Singlechart v-else ref="refSinglechart" />
              </div>
            </div>
            <div class="right-block">Right Content 2</div>
          </div>
          <div class="row Bottombox">
            <div class="left-block" style="background: #F3F3F3;">Left Content 3</div>
            <div class="right-block">Right Content 3</div>
          </div>
        </div>
      </pb-card>
    </div>
  </el-scrollbar>
  <Bigeachart v-if="bigvalflge" :isVisible="bigvalflge" @CancelFn="CancelbigechartFn" :propsKitchenList="KitchenList"
    :propsstaList="staList" />
</template>

<script setup lang="ts">
import TodaydataBox from "./components/todaydata.vue";
import Allechart from "./components/allechart.vue";
import Singlechart from './components/singlechart.vue'
import Bigeachart from './components/bigeachart.vue'
import { GetkitchenListApi } from '@/api/Purchasing';
import { getMealTimeslist } from '@/api/System';
import { getHomeAllSaleStatisApi, getHomeAllTodayStatisApi, getHomeSaleStatisApi, getHomeSaleRoiApi } from '@/api/newHome'
import { formattedDate } from '@/utils/moment';
const bigvalflge = ref(false)
const onBigeachartFn = () => {
  bigvalflge.value = true
}
const CancelbigechartFn = () => {
  bigvalflge.value = false
}
const refAllechart = ref(null as any)
const refSinglechart = ref(null as any)
const EchartFrom = reactive({
  tenantId: '',
  beginDate: '',
  endDate: '',
})
const SaleroiStatus = ref('statis' as any)
let NewDate = new Date() as any
const KitchenList = ref([] as any)
const Todaydatalist = ref([
] as any)
const selectkitchenFn = (event) => {
  GetDataechartFn()
}
const planDateRang = ref([] as any)
const dateChange = (time: any) => {
  planDateRang.value = [formattedDate(time[0], 'YYYY-MM-DD'), formattedDate(time[1], 'YYYY-MM-DD')]
  GetDataechartFn()
}
const staList = ref([] as any)
const changeCheck = (val) => {
  GetDataechartFn()
}
const setSaleroiStatusFn = (type) => {
  SaleroiStatus.value = type
  GetDataechartFn()
}
const GetDataechartFn = () => {
  let mealTimesCodeList = [] as any
  let mealTimesName = ''
  staList.value.map(el => {
    if (el.checked) {
      mealTimesCodeList.push(el.val)
      mealTimesName += el.label
    }
  })
  // console.log(EchartFrom.tenantId, 'name')
  if (EchartFrom.tenantId != 'all') {
    if (SaleroiStatus.value == 'statis') {
      getHomeSaleStatisApi({
        "beginDate": planDateRang.value[0],
        "endDate": planDateRang.value[1],
        "mealTimesCodeList": mealTimesCodeList,
        "tenantId": EchartFrom.tenantId
      }).then(res => {
        refSinglechart.value.initChart({ ...res.data, mealTimesName, SaleroiStatus: SaleroiStatus.value })
      })
    } else {
      getHomeSaleRoiApi({
        "beginDate": planDateRang.value[0],
        "endDate": planDateRang.value[1],
        "mealTimesCodeList": mealTimesCodeList,
        "tenantId": EchartFrom.tenantId
      }).then(res => {
        refSinglechart.value.initChart({ ...res.data, mealTimesName, SaleroiStatus: SaleroiStatus.value })
      })
    }
  } else {
    getHomeAllSaleStatisApi({
      "beginDate": planDateRang.value[0],
      "endDate": planDateRang.value[1],
      "mealTimesCodeList": mealTimesCodeList
    }).then(res => {
      refAllechart.value.initChart({
        ...res.data,
        mealTimesName
      })
    })
  }
}
onMounted(() => {
  planDateRang.value = [formattedDate(NewDate - 30 * 24 * 60 * 60 * 1000, 'YYYY-MM-DD'), formattedDate(NewDate, 'YYYY-MM-DD')]
  GetkitchenListApi().then(res => {
    let Obj = {
      tenantId: "all",
      tenantName: "全部餐厅"
    }
    KitchenList.value = res.data
    KitchenList.value.unshift(Obj)
    EchartFrom.tenantId = KitchenList.value[0].tenantId
  })
  getMealTimeslist().then(res => {
    res.data.map(el => {
      el.checked = true,
        el.val = el.mealTimesCode,
        el.label = el.mealTimesName
    })
    staList.value = res.data
    GetDataechartFn()
  })
  getHomeAllTodayStatisApi({}).then(res => {
    Todaydatalist.value = [{
      amout: res.data.totalSaleAmount,
      Trend: res.data.totalSaleAmountTrend,
      TrendType: res.data.totalSaleAmountTrendType,
      text1: '今日营业额',
      unit: '元',
      background: 'rgba(242, 253, 250, 1)'
    }, {
      amout: res.data.totalProfitAmount,
      Trend: res.data.totalProfitAmountTrend,
      TrendType: res.data.totalProfitAmountTrendType,
      text1: '今日利润',
      unit: '元',
      background: 'rgba(255, 242, 245, 1)'
    }, {
      amout: res.data.totalDishCopies,
      Trend: res.data.totalDishCopiesTrend,
      TrendType: res.data.totalDishCopiesTrendType,
      text1: '今日菜品出售数量',
      unit: '份',
      background: 'rgba(242, 255, 251, 1)'
    }, {
      amout: res.data.roi,
      Trend: res.data.roiTrend,
      TrendType: res.data.roiTrendType,
      text1: '今日投产比',
      unit: '',
      background: 'rgba(255, 252, 242, 1)',
      borderflge: true
    }]
  })
})
</script>

<style lang="scss" scoped>
.homebox {
  .row {
    display: flex;
    align-items: center;
  }

  .left-block {
    width: 74.4%;
    background-color: #fff;
    box-sizing: border-box;
    margin-right: 24px;
    height: 100%;
    padding: 24px;
  }

  .right-block {
    flex: 1;
    /* 自适应剩余空间 */
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    padding: 24px;
  }

  .Topbox {
    height: 221px;
    margin-bottom: 24px;
  }

  .Centerbox {
    height: 445px;
    margin-bottom: 24px;
  }

  .Bottombox {
    height: 271px;
  }

  .spantext1 {
    font-weight: 600;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-family: PingFang SC, PingFang SC;
    margin-right: 8px;
  }

  .spantext2 {
    font-family: DIN, DIN;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    margin-right: 8px;
  }

  .spantext3 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-right: 8px;
  }

  .btndiv {
    div {
      display: inline-block;
      padding: 0 12px;
      height: 28px;
      line-height: 28px;
      background: #FFFFFF;
      border-radius: 0px 1px 1px 0px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      text-align: center;
      cursor: pointer;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
    }


    .boderdiv {
      border: 1px solid rgba(13, 150, 139, 1);
      color: rgba(13, 150, 139, 1);
      ;
    }

  }
}
</style>
